<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
  import { uploadImageApi } from '@/apis/user'
  import type { illnessInfoData } from '@/types/description'
  import type { UploadImageResponse } from '@/types/user'
  import { onLoad } from '@dcloudio/uni-app'
  import { computed, ref, watch } from 'vue'
  import { useConsultStore } from '@/stores/consult'
  import type { illnessForm } from '@/types/consult'
  import { objectToParams } from '@/utils/objectToParams'

  // 接收地址参数
  const props = defineProps<{
    type: string
    illnessType: string
    childDepartment: string
  }>()

  // 病情描述数据
  const illnessInfo = ref<illnessForm>({
    illnessDesc: '',
    illnessTime: 1,
    consultFlag: 0,
    pictures: [] as UploadImageResponse[],
  })

  const consultStore = useConsultStore()

  onLoad(() => {
    // 先设置基础数据
    consultStore.type = Number(props.type)
    consultStore.illnessType = Number(props.illnessType)
    consultStore.depId = props.childDepartment
    // 再询问是否恢复存储的数据
    const storedData = consultStore.illnessInfoStore
    if (storedData.illnessDesc || storedData.pictures?.length) {
      uni.showModal({
        title: '是否恢复上次填写记录',
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            // 修改：使用 Object.assign 或逐个属性赋值来保持响应式
            Object.assign(illnessInfo.value, {
              illnessDesc: storedData.illnessDesc,
              illnessTime: storedData.illnessTime,
              consultFlag: storedData.consultFlag,
              pictures: storedData.pictures,
            })
          }
          if (res.cancel) {
            consultStore.illnessInfoStore = {} as illnessForm
          }
        },
      })
    }
  })

  watch(
    illnessInfo.value,
    () => {
      // 使用解构赋值简化代码
      const { illnessDesc, illnessTime, consultFlag, pictures } = illnessInfo.value

      // 一次性更新store
      consultStore.illnessInfoStore = {
        ...consultStore.illnessInfoStore,
        illnessDesc,
        illnessTime,
        consultFlag,
        pictures,
      }
    },
    { deep: true }
  )

  // 患病时长
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]

  // 是否就诊过
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]

  // 上传图片
  const onSelect = async (e: UniHelper.UniFilePickerOnSelectEvent) => {
    if (e.tempFilePaths[0]) {
      const res = await uploadImageApi(e.tempFilePaths[0])
      illnessInfo.value.pictures!.push(res)
    }
  }

  // 删除图片
  const onDelete = (e: UniHelper.UniFilePickerOnDeleteEvent) => {
    illnessInfo.value.pictures!.splice(e.index, 1)
  }

  const imageList = computed(() => {
    return illnessInfo.value.pictures!.map((item: UploadImageResponse) => {
      return {
        name: item.id,
        extname: item.url.split('.').pop()!,
        url: item.url,
      }
    })
  })

  //验证
  const nextStepEnable = computed(() => {
    return illnessInfo.value.illnessDesc && illnessInfo.value.pictures!.length > 0
  })

  // 下一步
  const nextStep = () => {
    uni.navigateTo({
      url: `/subpkg_archive/list/list?type=consult`,
    })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="illnessInfo.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            class="tag"
            v-for="item in illnessTimes"
            :key="item.value"
            :class="{ active: illnessInfo.illnessTime === item.value }"
            @click="illnessInfo.illnessTime = item.value"
            >{{ item.text }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            class="tag"
            v-for="item in consultFlags"
            :key="item.value"
            :class="{ active: illnessInfo.consultFlag === item.value }"
            @click="illnessInfo.consultFlag = item.value"
            >{{ item.text }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          :value="imageList"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          @select="onSelect"
          @delete="onDelete"
          :auto-upload="false"
        />
      </view>
      <text>{{ JSON.stringify(illnessInfo, null, 2) }}</text>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!nextStepEnable" @click="nextStep">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './description.scss';
</style>
